<template>
	<div style="height: 100%;margin: 10px;">
		<a-row type="flex">
			<!-- 左侧区 -->
			<a-col :flex="1">
				<a-row style="line-height:20px;">
					<a-button type="link" @click="addDataType()">
						<a-icon type="file-add" />新增</a-button>
					<a-button type="link" @click="copyDataType()">
						<a-icon type="snippets" />套用</a-button>
				</a-row>
				<a-row>
					<a-row type="flex">
						<a-col :flex="1">
							<div style="height:600px;overflow: hidden;overflow-y: scroll;border-style: solid;border-color: #00B7B8;border-width: 1px;">
								<!-- <ul style="list-style:none;">
									<li v-for="item in typeList" :RUID="item.RUID" :tablename="item.tablename" v-on:click="refreshDataTypeInfo(item.RUID)">
										{{item.name}}
									</li> -->
								<div v-for="(item,index) in typeList" style="line-height: 10px;" :index="index" :RUID="item.RUID" :tablename="item.tablename"
								 v-on:click="refreshDataTypeInfo(item.RUID)">
									<a-button class="button-color-sunset" block>
										{{item.name}}
									</a-button>
								</div>
								</ul>
							</div>
						</a-col>

					</a-row>
				</a-row>

			</a-col>
			<!-- 右侧按区 -->
			<a-col :flex="5">
				<a-row>
					<a-form-model :model="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }">
						<a-row style="margin-bottom:1px;" type="flex" justify="space-around" align="middle">
							<a-col :span="4">
								<!-- 占位 -->
							</a-col>
							<a-col :span="8">
								<a-form-model-item :wrapper-col="{ span: 14, offset: 12 }" :model="form">
									<a-button type="primary" style="margin-right: 10px;" @click="onSubmit()">
										保存
									</a-button>
									<a-button type="primary" style="margin-right: 10px;" @click="onDataSet()">
										资料组
									</a-button>
									<a-button style="margin-right: 10px;" @click="onDelete()" id="test">
										删除
									</a-button>
								</a-form-model-item>
							</a-col>
							<a-col :span="12">
								<a-form-model-item :wrapper-col="{ span: 14, offset: -1 }">
									<a-button type="link" @click="onInitDataStructure()">
										<a-icon type="file-add" />
										初始化数据结构
									</a-button>
									<a-button type="link" style="margin-left: 1px;" @click="onDataBackup()">
										<a-icon type="file-add" />
										数据备份
									</a-button>
									<a-button type="link" style="margin-left: 1px;" @click="onRecovery()">
										<a-icon type="file-add" />
										数据恢复
									</a-button>
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="12">
								<a-form-model-item label="编码:">
									<a-input v-model="form.code" />
								</a-form-model-item>
							</a-col>
							<a-col :span="12">
								<a-form-model-item :label-col="{ span: 3 }" label="名称:">
									<a-input v-model="form.name" id="aaa" />
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="12">
								<a-form-model-item label="表名:">
									<a-input v-model="form.tablename" />
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="12">
								<a-form-model-item label="无权下载:">
									<a-input v-model="form.nodownrightmessage" />
								</a-form-model-item>
							</a-col>
							<a-col :span="12">
								<a-form-model-item label="无权阅读:" :label-col="{ span: 3 }">
									<a-input v-model="form.noreadrightmessage" />
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="12">
								<a-form-model-item label="录入页面:">
									<a-input v-model="form.editorpage" />
								</a-form-model-item>
							</a-col>
							<a-col :span="12">
								<a-form-model-item :wrapper-col="{ span: 14, offset: -1 }">
									<a-button style="margin-right: 10px;" @click="onPageSelect('editorpage',form.editorpage)">选择</a-button>
									<a-button style="margin-right: 10px;" @click="onPageCopy('editorpage',form.editorpage)">套用</a-button>
									<a-button style="margin-right: 10px;" @click="onPageCreat('editorpage',form.editorpage)">新建</a-button>
									<a-button style="margin-right: 10px;" @click="onPageAdd('editorpage',form.editorpage)">增量</a-button>
									<a-button style="margin-right: 10px;" @click="onPageSet('editorpage',form.editorpage)">设置</a-button>
								</a-form-model-item>

							</a-col>
						</a-row>
						<a-row>
							<a-col :span="12">
								<a-form-model-item label="详情页面:">
									<a-input v-model="form.detailspage" />
								</a-form-model-item>
							</a-col>
							<a-col :span="12">
								<a-form-model-item :wrapper-col="{ span: 14, offset: -1 }">
									<a-button style="margin-right: 10px;" @click="onPageSelect('detailspage',form.detailspage)">选择</a-button>
									<a-button style="margin-right: 10px;" @click="onPageCopy('detailspage',form.detailspage)">套用</a-button>
									<a-button style="margin-right: 10px;" @click="onPageCreat('detailspage',form.detailspage)">新建</a-button>
									<a-button style="margin-right: 10px;" @click="onPageAdd('detailspage',form.detailspage)">增量</a-button>
									<a-button style="margin-right: 10px;" @click="onPageSet('detailspage',form.detailspage)">设置</a-button>
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="12">
								<a-form-model-item label="移动端详情页面:">
									<a-input v-model="form.phonedetailspage" />
								</a-form-model-item>
							</a-col>
							<a-col :span="12">
								<a-form-model-item :wrapper-col="{ span: 14, offset: -1 }">
									<a-button style="margin-right: 10px;" @click="onPageSelect('phonedetailspage',form.phonedetailspage)">选择</a-button>
									<a-button style="margin-right: 10px;" @click="onPageCopy('phonedetailspage',form.phonedetailspage)">套用</a-button>
									<a-button style="margin-right: 10px;" @click="onPageCreat('phonedetailspage',form.phonedetailspage)">新建</a-button>
									<a-button style="margin-right: 10px;" @click="onPageAdd('phonedetailspage',form.phonedetailspage)">增量</a-button>
									<a-button style="margin-right: 10px;" @click="onPageSet('phonedetailspage',form.phonedetailspage)">设置</a-button>
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="16">
							</a-col>
							<a-col :span="8">
								<a-form-model-item :wrapper-col="{ span: 14, offset: -1 }">
									<a-button style="margin-right: 10px;" @click="onPageSelect('phonedetailspage',form.phonedetailspage)">套用元数据</a-button>
									<a-button style="margin-right: 10px;" @click="onPageCopy('phonedetailspage',form.phonedetailspage)">追加元数据</a-button>
								</a-form-model-item>
							</a-col>
						</a-row>
						<!-- <a-row>
							<a-col :span="12">
								<a-form-model-item label="元数据列表:">
									<div style="width: 1000px;margin-left: 10px;margin-bottom: 20px;">
										<a-table :columns="columns" :data-source="tableData" :pagination="false" :scroll="{ y: 300 }" rowKey='RUID'>
											<span slot="operation" slot-scope="text, record">
												<a slot="action" href="javascript:;" @click="onTableSet(record,text)">设置</a>
												<a-divider type="vertical" />
												<a slot="action" href="javascript:;" @click="onTableDelete(record)">删除</a>
												<a-divider type="vertical" />
												<a slot="action" href="javascript:;" @click="onTableInsert(record)">插入</a>
												<a-divider type="vertical" />
												<a slot="action" href="javascript:;" @click="onTableMoveUp(record)">上移</a>
												<a-divider type="vertical" />
											</span>

										</a-table>
									</div>
								</a-form-model-item>
							</a-col>
						</a-row> -->
						
<!-- 						<a-row>
							<a-col :span="12">
								<a-form-model-item label="元数据列表:">
									  <div style="width: 1000px;margin-left: 10px;margin-bottom: 20px;">
									    <a-button class="editable-add-btn" @click="handleAdd">
											添加元数据
									    </a-button>
									    <a-table bordered :data-source="tableData" :pagination="false" :scroll="{ y: 300 }"
										 :columns="columns" rowKey='RUID'>
									      <template slot="name" slot-scope="text, record">
									              <editable-cell :text="text" @change="onCellChange(record.key, 'name', $event)" />
									            </template>
		
									      <template slot="operation" slot-scope="text, record">
									        <a-popconfirm
									          v-if="tableData.length"
									          title="确认删除?"
									          @confirm="() => onDelete1(record.RUID)"
									        >
									          <a href="javascript:;">删除</a>
									        </a-popconfirm>
											<a-divider type="vertical" />
											<a href="javascript:;" @click="handleAdd">设置</a>
											<a-divider type="vertical" />
											<a href="javascript:;" @click="handleAdd">插入</a>
											<a-divider type="vertical" />
											<a href="javascript:;" @click="handleAdd">上移</a>
									      </template>
										  
									    </a-table>
									  </div>
								</a-form-model-item>
							</a-col>
						</a-row> 1-->
						 <a-row>
							<a-col :span="12">
								<a-form-model-item label="元数据列表:">
									<div>
									    <a-button class="editable-add-btn" @click="handleAdd">
									      Add
									    </a-button>
									    <a-table bordered :data-source="dataSource" :columns="columns">
									      <template slot="name" slot-scope="text, record">
									        <editable-cell :text="text" @change="onCellChange(record.key, 'name', $event)" />
									      </template>
									      <template slot="operation" slot-scope="text, record">
									        <a-popconfirm
									          v-if="dataSource.length"
									          title="Sure to delete?"
									          @confirm="() => onDelete(record.key)"
									        >
									          <a href="javascript:;">Delete</a>
									        </a-popconfirm>
									      </template>
									    </a-table>
									  </div>
								</a-form-model-item>
							</a-col>
						</a-row> 
						<a-row>
							<a-col :span="12">
								<a-form-model-item label="列表页面显示模板:">
									<a-textarea v-model="form.listhtml" />
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="12">
								<a-form-model-item label="详细页面显示模板:">
									<a-textarea v-model="form.listhtml" />
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="12">
								<a-form-model-item label="移动端列表页面显示模板:">
									<a-textarea v-model="form.listhtml" />
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="12">
								<a-form-model-item label="移动端详细页面显示模板:">
									<a-textarea v-model="form.listhtml" />
								</a-form-model-item>
							</a-col>
						</a-row>
					</a-form-model>
				</a-row>

			</a-col>
		</a-row>
		<div>
			<a-modal v-model="dataTypeVisible" title="新增" @ok="handleOk('dataTypeForm')" @cancel="resetForm('dataTypeForm')" destroyOnClose:true>
				<a-form-model ref="dataTypeForm" :model="dataTypeForm" :label-col="{ span: 7}" 
				:wrapper-col="{ span: 14 }" >
					<a-form-model-item label="资料类型名称:" prop="dataTypeName">
						<a-input v-model="dataTypeForm.dataTypeName" />
					</a-form-model-item>
					<a-form-model-item label="资料类型编码:" prop="dataTypeCode">
						<a-input v-model="dataTypeForm.dataTypeCode " />
					</a-form-model-item>
					<a-form-model-item label="表名:" prop="dataTypeTable">
						<a-input v-model="dataTypeForm.dataTypeTable" />
					</a-form-model-item>
<!-- 					<a-form-model-item :wrapper-col="{ span: 4, offset: 4 }">
						<a-button style="margin-left: 10px" @click="resetForm('dataTypeForm')">
							Reset
						</a-button>
					</a-form-model-item> -->
				</a-form-model>
			</a-modal>
		</div>

	</div>
</template>
<script>
	//===============
	const EditableCell = {
	  template: `
	      <div class="editable-cell">
	        <div v-if="editable" class="editable-cell-input-wrapper">
	          <a-input :value="value" @change="handleChange" @pressEnter="check" /><a-icon
	            type="check"
	            class="editable-cell-icon-check"
	            @click="check"
	          />
	        </div>
	        <div v-else class="editable-cell-text-wrapper">
	          {{ value || ' ' }}
	          <a-icon type="edit" class="editable-cell-icon" @click="edit" />
	        </div>
	      </div>
	    `,
	  props: {
	    text: String,
	  },
	  data() {
	    return {
	      value: this.text,
	      editable: false,
	    };
	  },
	  methods: {
	    handleChange(e) {
	      const value = e.target.value;
	      this.value = value;
	    },
	    check() {
	      this.editable = false;
	      this.$emit('change', this.value);
	    },
	    edit() {
	      this.editable = true;
	    },
	  },
	};
	
	
	//==============
	const columns1 = [{
			title: '编码',
			dataIndex: 'code',
			width: 100,
		},
		{
			title: '名称',
			dataIndex: 'name',
			width: 100,
		},
		{
			title: '类型',
			dataIndex: 'valuetype',
			width: 100,
		},
		{
			title: '操作',
			key: 'operation',
			scopedSlots: {
				customRender: 'operation'
			},
			width: 120,
		},
	];

	import {
		dataTypeManageList
	} from '../../api/dataTypeManage.js'
	export default {
		components: {
		    EditableCell,
		  },
		name: "dataTypeManage",
		mounted() {
			this.getDaDataTypeList(this.typeListParam)
			//console.log("e:"+JSON.stringify(this.$refs));
		},
		data() {
			return {
				dataSource: [
				        {
				          key: '0',
				          name: 'Edward King 0',
				          age: '32',
				          address: 'London, Park Lane no. 0',
				        },
				        {
				          key: '1',
				          name: 'Edward King 1',
				          age: '32',
				          address: 'London, Park Lane no. 1',
				        },
				      ],
					count: 2,
					      columns: [
					        {
					          title: 'name',
					          dataIndex: 'name',
					          width: '30%',
					          scopedSlots: { customRender: 'name' },
					        },
					        {
					          title: 'age',
					          dataIndex: 'age',
					        },
					        {
					          title: 'address',
					          dataIndex: 'address',
					        },
					        {
					          title: 'operation',
					          dataIndex: 'operation',
					          scopedSlots: { customRender: 'operation' },
					        },
					      ],
				dataTypeForm: {
					key:'',
					dataTypeName: '',
					dataTypeCode: '',
					dataTypeTable: '',
				},
				dataTypeVisible: false,
				dataTypeConfirmLoading: false,
				tableData: [],
				columns1,
				typeListParam: {
					"pageno": 0,
					"pagesize": 100,
					"type": "datamodel6",
					"codeflag": "1",
					"filter": [{
						"fieldname": "code",
						"relationop": ">",
						"word": "-1"
					}],
					"field": "RUID,name,tablename",
					"order": [{
						"fieldname": "name",
						"type": "A"
					}]
				},
				typeList: [],
				dataTypeInfoParams: {
					"pageno": 0,
					"type": "datamodel6",
					"codeflag": "1",
					"filter": [],
					"field": "RUID,code,tablename,entitytemp,name,noreadrightmessage,nodownrightmessage,phonedetailspage,editorpage,detailspage,listpage,phonelistpage,managerpage,phonemanagerpage,listhtml"
				},
				typeListTableParam: {
					"pageno": 0,
					"type": "metadata6",
					"codeflag": "1",
					"filter": [],
					"field": "RUID,name,type,code,valuetype"
				},
				form: {
					name: '',
					code: '',
					tablename: '',
					noreadrightmessage: '',
					nodownrightmessage: '',
					editorpage: '',
					detailspage: '',
					listhtml: '',
					RUID: '',
					phonedetailspage: '',
					phoneeditorpage: '',
					entitytemp: '',
					sysflag: '',
					listpage: '',
					phonelistpage: '',
					managerpage: '',
					phonemanagerpage: '',
				},
			}
		},
		methods: {
			//=============
			 onCellChange(key, dataIndex, value) {
			      const dataSource = [...this.dataSource];
			      const target = dataSource.find(item => item.key === key);
			      if (target) {
			        target[dataIndex] = value;
			        this.dataSource = dataSource;
			      }
			    },
			    onDelete(key) {
			      const dataSource = [...this.dataSource];
			      this.dataSource = dataSource.filter(item => item.key !== key);
			    },
			    handleAdd() {
			      const { count, dataSource } = this;
			      const newData = {
			        key: count,
			        name: `Edward King ${count}`,
			        age: 32,
			        address: `London, Park Lane no. ${count}`,
			      };
			      this.dataSource = [...dataSource, newData];
			      this.count = count + 1;
			    },
			
			//============
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			showModal() {
				this.dataTypeVisible = true;
			},
			handleOk(formName) {
				console.log(this.$refs[formName])
				console.log(this.dataTypeForm)
				this.form.name = this.dataTypeForm.dataTypeName;
				this.form.code = this.dataTypeForm.dataTypeCode;
				this.form.tablename = this.dataTypeForm.dataTypeTable;
				this.dataTypeVisible = false;
				this.dataTypeConfirmLoading = false;
				this.resetForm(formName)
				
			},
			handleCancel(formName) {
				console.log(this.forms)
				this.forms.resetFields();
				console.log(this.forms.resetFields())

			},
			getDaDataTypeList(params) {
				dataTypeManageList(params).then(res => {
					this.typeList = res.recordlist;
					//console.log(res.recordlist)
				})
			},
			refreshDataTypeInfo(ruid) {
				let param = [{
					"fieldname": "RUID",
					"word": ruid
				}];
				this.dataTypeInfoParams.filter = param;
				dataTypeManageList(this.dataTypeInfoParams).then(res => {
					this.form = res.recordlist[0];
					let tableParam = [{
						"fieldname": "dmcode",
						"word": res.recordlist[0].code
					}];
					this.typeListTableParam.filter = tableParam;
					dataTypeManageList(this.typeListTableParam).then(res => {
						//console.log(JSON.stringify(res.recordlist))
						for(var i=0;i<res.recordlist.length;i++){
							res.recordlist[i].key=i+1;
						}
						this.tableData = res.recordlist;
					});
				});
			},
			onSubmit() {
				console.log('表单保存按钮!', this.form);
			},
			onDataSet() {
				console.log('资料组按钮!', this.form);
			},
			onDelete() {
				console.log('表单删除按钮!', this.form);
			},
			onInitDataStructure() {
				console.log('初始化数据结构!', this.form);
			},
			ondataBackup() {
				console.log('数据备份按钮!', this.form);
			},
			onRecovery() {
				console.log('数据恢复按钮!', this.form);
			},
			onTableSet(record, text) {
				console.log("设置:" + JSON.stringify(record))
			},
			onTableDelete(record, text) {
				console.log("删除:" + JSON.stringify(record))
			},
			onTableInsert(record, text) {
				console.log("插入:" + JSON.stringify(record))
			},
			onTableMoveUp(record, text) {
				console.log("上移:" + JSON.stringify(record))
			},
			onPageSelect(type, id) {
				console.log(type + ":" + id + ":点击选择按钮")
			},
			onPageCopy(type, id) {
				console.log(type + ":" + id + ":点击复用按钮")
			},
			onPageCreat(type, id) {
				console.log(type + ":" + id + ":点击新建按钮")
			},
			onPageAdd(type, id) {
				console.log(type + ":" + id + ":点击增量按钮")
			},
			onPageSet(type, id) {
				console.log(type + ":" + id + ":点击设置按钮")
			},
			addDataType() {
				console.log('新增资料类型按钮')
				this.dataTypeVisible = true;

			},
			copyDataType() {
				console.log('套用资料类型按钮')
			},
			copyDataType() {
				console.log('套用资料类型按钮')
			},
			copyDataType() {
				console.log('套用资料类型按钮')
			},
			copyDataType() {
				console.log('套用资料类型按钮')
			},
		}
	}
</script>

<style scoped>
	.a-input {
		border: 1px solid #378888 !important;
	}

	.button-color-sunset {
		/* background-color: #FAAD14; */
		/* border-color: #FAAD14; */

		&:hover,
		&:focus {
			background-color: #000000;
			border-color: #000000;
		}

		&:active,
		&.active {
			background-color: #000000;
			border-color: #000000;
		}
	}
	.editable-cell {
	  position: relative;
	}
	
	.editable-cell-input-wrapper,
	.editable-cell-text-wrapper {
	  padding-right: 24px;
	}
	
	.editable-cell-text-wrapper {
	  padding: 5px 24px 5px 5px;
	}
	
	.editable-cell-icon,
	.editable-cell-icon-check {
	  position: absolute;
	  right: 0;
	  width: 20px;
	  cursor: pointer;
	}
	
	.editable-cell-icon {
	  line-height: 18px;
	  display: none;
	}
	
	.editable-cell-icon-check {
	  line-height: 28px;
	}
	
	.editable-cell:hover .editable-cell-icon {
	  display: inline-block;
	}
	
	.editable-cell-icon:hover,
	.editable-cell-icon-check:hover {
	  color: #108ee9;
	}
	
	.editable-add-btn {
	  margin-bottom: 8px;
	}
</style>
